<template>
  <div class="user-add-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">新增用户</h1>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-8 max-w-2xl mx-auto">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" clearable />
        </el-form-item>

        <el-form-item label="单位" prop="department">
          <el-input v-model="form.department" placeholder="请输入单位" clearable />
        </el-form-item>

        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话号码" clearable />
        </el-form-item>

        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入账号" clearable />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            show-password
            clearable
          />
        </el-form-item>

        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" placeholder="请分配角色" class="w-full">
            <el-option label="管理员" value="管理员" />
            <el-option label="审核员" value="审核员" />
            <el-option label="普通用户" value="普通用户" />
          </el-select>
        </el-form-item>

        <el-form-item class="mt-8">
          <div class="flex gap-4 w-full justify-center">
            <el-button type="primary" size="large" @click="submitForm" class="w-32">
              新增
            </el-button>
            <el-button size="large" @click="cancel" class="w-32">
              取消
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const formRef = ref(null)

const form = reactive({
  name: '',
  department: '',
  phone: '',
  account: '',
  password: '',
  role: ''
})

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请输入单位', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 12, message: '密码长度至少12位', trigger: 'blur' },
    { 
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{12,}$/, 
      message: '密码应包含字母、数字及符号', 
      trigger: 'blur' 
    }
  ],
  role: [
    { required: true, message: '请分配角色', trigger: 'change' }
  ]
}

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('用户创建成功')
      setTimeout(() => {
        router.push('/users/list')
      }, 500)
    }
  })
}

const cancel = () => {
  router.back()
}
</script>

<style scoped>
.user-add-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #595959;
}

.dark :deep(.el-form-item__label) {
  color: #d9d9d9;
}

:deep(.el-input__inner) {
  transition: all 0.3s;
}

:deep(.el-input__inner:focus) {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
</style>

